<template>
	<view class="content">

		<view class="school" v-for="(item ,index) in courseList" :key="index">
			<view class="school_synopsis" @click="navRoute(item.id)">
				<view class="_img">
					<image :src="item.logo" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view class="">
						<view class="name">
							{{item.user||'暂未设置机构名'}}
						</view>
						<view v-if="item.juli" style="text-align: right;width: 30%;">
							距你{{item.juli>1000?item.juli/1000:item.juli}}{{item.juli>1000?'km':'m'}}
						</view>
					</view>
					<view class="type" v-if="item.class_title[0]">
						<text v-for="(items ,index) in item.class_title" :key="index">{{items}}</text>

					</view>
					<view class="">
						<u-icon name="map-fill" color="#a7a7a7" size="26"></u-icon>
						{{item.add||'暂无地址信息'}}
					</view>
				</view>
			</view>
			<view class="course" v-if="item.coursesClone.length">
				<view class="" :style="{maxHeight:item.unfold?'1900rpx':'120rpx'}">
					<u-time-line class="time_line">
						<u-time-line-item nodeTop="2" v-for="(items, Xindex) in item.coursesClone" :key="Xindex"
							class="time_line_item">

							<template v-slot:content>
								<view class="courseItem" @click="navcluster(items.id)">
									<view class="">
										{{items.title}}
									</view>
									<view class="">
										￥{{items.price_a!=0&&items.price_b!=0?(items.price_a>items.price_b?items.price_b:items.price_a):(items.price_a==0&&items.price_a==0?items.price:items.price_a==0?items.price_b:items.price_a)}}
									</view>
								</view>
							</template>
						</u-time-line-item>

					</u-time-line>
				</view>

				<view class="more" @click="gengduo(index)" v-if="item.courses.length>3&&!item.unfold">
					<block v-if="!item.unfold">查看更多课程 <u-icon name="arrow-down" size="28"></u-icon>
					</block>
					<block v-else>收起 <u-icon name="arrow" size="28"></u-icon>
					</block>
				</view>
			</view>
		</view>

		<u-empty v-if="!courseList.length" text="暂无相应数据" mode="search" margin-top="200"></u-empty>
		<Loading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [],
				id: '',
				aid: '',
				networkCode: true,
				page: 1
			}
		},
		onLoad(e) {
			console.log(e.keyword)
			this.keyword = e.keyword
			this.id = e.id
			this.aid = e.aid
			this.newDate()
		},
		methods: {
			newDate() {

				if (!this.networkCode) return uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				});
				let location = uni.getStorageSync('location');
				let data = {
					page: this.page,
					num: 10,
					longitude: location.lng || '',
					latitude: location.lat || ''
				}
				if (this.aid || this.id) {
					data.type = 3
					data.aid = this.aid
					data.bid = this.id
					if (this.id) data.type = 4
				} else {
					data.type = 2
					data.title = this.keyword
				}
				this.$myRuquest('home/index/merchants_list', data).then(res => {
					if (res.code == 400) {
						// this.courseList = res.data
						if (res.data.length != 10) this.networkCode = false
						this.page++
						res.data.forEach(item => {
							item.class_title = item.class_title.split(',')
							item.juli = parseInt(item.juli)

							if (item.courses.length > 2) {
								item.coursesClone = item.courses.slice(0, 2)
							} else {
								item.coursesClone = item.courses
							}

						})
						this.courseList.push(...res.data)
					}
				})
			},
			onReachBottom() {
				this.newDate()

			},
			gengduo(index) {
				console.log(this.courseList[index])
				this.courseList[index].coursesClone = this.courseList[index].courses

				this.courseList[index].unfold = true
			},
			navRoute(id) {
				uni.navigateTo({
					url: `/pages/organizationDetails/organizationDetails?id=${id}`
				});
			},
			navcluster(id) {
				uni.navigateTo({
					url: `/pages/organizationDetails/clusterHelp/clusterHelp?id=${id}`
				});
			},
		}
	}
</script>

<style lang="less">
	.content {
		background-color: rgb(247, 247, 247);
		padding: 20upx;
		min-height: 100vh;
	}

	.school {
		// margin: 20upx 0;
		background-color: #fff;
		padding: 20upx;
		margin-top: 10upx;
		margin-bottom: 20upx;
		border-radius: 12upx;

		.school_synopsis {
			display: flex;

			._img {
				width: 136upx;
				height: 136upx;
				margin-right: 30upx;
				border-radius: 12upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: calc(100% - 160upx);

				view:nth-child(1) {
					display: flex;
					font-size: 20upx;
					color: #666666;

					.name {
						width: 70%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28upx;
						color: #000;
						font-weight: 900;
					}
				}

				view:nth-child(3) {
					color: #666666;
					font-size: 24upx;
				}

				.type {
					margin: 15upx 0;

					text {
						border: 2upx solid #FF515E;
						color: #FF515E;
						padding: 0 8upx;
						margin: 5upx;
						border-radius: 10upx;
						font-size: 22upx;
					}

				}

			}
		}

		.course {

			// transition: all 2s;
			padding-top: 40upx;
			padding-left: 120upx;

			>view {
				padding: 10upx;
				overflow: hidden;
				transition: all 2s;

				.time_line {
					max-height: 200upx;

					.time_line_item {
						.courseItem {
							display: flex;
							height: 40upx;
							line-height: 20upx;

							view:nth-child(1) {

								min-width: 400upx;
							}

							view:nth-child(2) {

								color: #FF515E;
								font-weight: 900;
							}

						}

					}


					.time_line_item:nth-last-child(1) {
						.courseItem {
							height: 20upx;
						}

					}
				}


			}

			.more {
				margin-top: 40upx;
				text-align: center;
				font-size: 26upx;
				color: #8f8f8f;
				border-radius: 8upx;
				background-color: #F4F5F7;
				padding: 10upx 0;
			}
		}

	}
</style>
